	<template>
		<view class="bg">

		<!-- wrap: “包裹、环绕”  -->
		<view class="wrap">
			<!-- flex的包围容器 -->
			<view class="container">
				<!-- 顶部安全区域占位 -->
				<!-- <view class="navbar" :style="{ paddingTop: safeAreaInsets.top-30 + 'px' }"></view> -->
				
				<!-- 头部 -->
				<view class="header">	
					<!-- 左边 -->
					<view class="logo">
						<image src="@/static/logo_hiack.png"></image>
					</view>
					<!-- 右边 -->
					<view class="role">
							<image src="@/static/user.png">
						</image>
						
					</view>
				</view>
				
				
				
				<!-- 中间 1-->
				<view class="banner">
					<image src="@/static/majiangdanren.png"/>
<!-- 					<image src="@/static/majiangdanren.png"/> -->
				</view>
				
				
				<!-- 中间2 -->
				<view class="info">
					<!-- <view class="info_item">
						<view class="icon">
							<image src="@/static/logo.png"></image>
						</view>
						<view class="text">
								个人信息1
						</view>
						<view class="icon">
							<image src="@/static/logo.png"></image>
						</view>
					</view> -->
					<view class="info_item">
						<view class="icon">
							<image src="@/static/coding.png"></image>
						</view>
						<view class="text">
								钉钉进步体
						</view>
						
					</view>
					<view class="info_item">
						<view class="icon">
							<image src="@/static/coding.png"></image>
						</view>
						<view class="text">
								welcome
						</view>
					</view>
					<view class="info_item">
						<view class="icon">
							<image src="@/static/coding.png"></image>
						</view>
						<view class="text">
								alimama
						</view>
					</view>
					<view class="info_item">
						<view class="icon">
							<image src="@/static/coding.png"></image>
						</view>
						<view class="text">
							coding
						</view>
					</view>
					
				</view>
				
				
				<!-- 脚部 -->
<!-- 				<view class="foot">
					<view class="footer"> -->
					  <!-- 图标部分 -->
			<!-- 		  <view class="footer-icons">
					    <image src="/static/coding.png" class="footer-icon"></image>
					    <image src="/static/coding.png" class="footer-icon"></image>
						<image src="/static/coding.png" class="footer-icon"></image>
					  </view> -->
					  <!-- 分割线 -->
		<!-- 			 <view class="footer-divider"></view>
					  <view class="footer-copyright">
					    &copy;2025   ·  HiACK-回响  ·  POWER BY 1stfly 
					  </view>
					</view> 
				</view> -->
				
				
				
				
			</view>
		</view>
		</view>
		
		
		
		
		
		<customtabbar ></customtabbar>
		
	</template>

	<script>
	import customtabbar from "@/components/customtabbar/customtabbar.vue";
	
	export default {
	  data() {
	    return {
	      title: 'Hello'
	    }
	  },
	  onLoad() {
	    // this.handleWxLogin().then((res) => {
	    //   // 这里确保handleWxLogin返回的是Promise，才能用.then
	    //   console.log(res.code);
	    // }).catch((err) => {
	    //   console.log('登录出错:', err);
	    // });
	  },
	  methods: {
	  //   get_openid() {
	  //     wx.login().then((res) => {
	  //       const code = res.code;
	  //       console.log(res);
	  //     }).catch((error) => {
	  //       console.error('登录出错:', error);
	  //     });
	  //   },
	  //   handleWxLogin() {
	  //     return new Promise((resolve, reject) => {
	  //       uni.login({
	  //         success: (res) => {
	  //           if (res.code) {
	  //             uni.request({
	  //               url: 'http://localhost:3000/wxLogin',
	  //               data: {
	  //                 code: res.code
	  //               },
	  //               success: (response) => {
	  //                 console.log('登录成功，后端返回openid数据:', response.data);
	  //                 resolve(res);
	  //               },
	  //               fail: (error) => {
	  //                 console.log('请求后端登录接口失败:', error);
	  //                 reject(error);
	  //               }
	  //             });
	  //           } else {
	  //             console.log('登录失败！' + res.errMsg);
	  //             reject(new Error(res.errMsg));
	  //           }
	  //         },
	  //         fail: (err) => {
	  //           console.log('调用uni.login失败:', err);
	  //           reject(err);
	  //         }
	  //       });
	  //     });
	  //   }
	  }
	}
	</script>
	<style>
		
		.bg {
		    width: 100%;
		    height: 100vh;
		    background-image: 
		       radial-gradient(closest-side, rgba(0, 153, 255, 0.5), rgba(255, 255, 255, 0)),
		       radial-gradient(closest-side, rgba(102, 0, 204, 0.5), rgba(255, 102, 255, 0)),
		       radial-gradient(closest-side, rgba(0, 255, 255, 0.5), rgba(153, 255, 255, 0)),  
		       radial-gradient(closest-side, rgba(34, 139, 34, 0.5), rgba(124, 252, 0, 0)),  
		       radial-gradient(closest-side, rgba(255, 0, 153, 0.5), rgba(255, 153, 255, 0));
		    background-size: 
		        130vmax 130vmax, 
		        80vmax 80vmax, 
		        90vmax 90vmax, 
		        110vmax 110vmax, 
		        90vmax 90vmax;
		    background-position:
		        -80vmax -80vmax, 
		        60vmax -30vmax, 
		        10vmax 10vmax,
		        -30vmax -10vmax,
		        50vmax 50vmax;
		    background-repeat: no-repeat;
		    animation: 3s movement linear infinite;
		    position: absolute;
		    top: 0;
		    left: 0;
		    z-index: -1;
		}
		
		@keyframes movement {
		    0%,
		    100% {
		        background-size: 
		            130vmax 130vmax, 
		            80vmax 80vmax, 
		            90vmax 90vmax, 
		            110vmax 110vmax, 
		            90vmax 90vmax;
		        background-position:
		            -80vmax -80vmax, 
		            60vmax -30vmax, 
		            10vmax 10vmax,
		            -30vmax -10vmax, 
		            50vmax 50vmax;
		    }
		    25% {
		        background-size: 
		            100vmax 100vmax, 
		            90vmax 90vmax, 
		            100vmax 100vmax, 
		            90vmax 90vmax, 
		            60vmax 60vmax;
		        background-position:
		            -60vmax -90vmax, 
		            50vmax -40vmax,
		            0vmax -20vmax,
		            -40vmax -20vmax,
		            40vmax 60vmax;
		    }
		    50% {
		        background-size:
		            80vmax 80vmax, 
		            110vmax 110vmax, 
		            80vmax 80vmax, 
		            60vmax 60vmax, 
		            80vmax 80vmax;
		        background-position:
		            -50vmax -70vmax, 
		            40vmax -30vmax, 
		            10vmax 0vmax, 
		            20vmax 10vmax, 
		            30vmax 70vmax;
		    }
		    75% {
		        background-size: 
		            90vmax 90vmax, 
		            90vmax 90vmax, 
		            100vmax 100vmax, 
		            90vmax 90vmax, 
		            70vmax 70vmax;
		        background-position:
		            -50vmax -40vmax, 
		            50vmax -30vmax, 
		            20vmax 0vmax,
		            -10vmax 10vmax, 
		            40vmax 60vmax;
		    }
		}
		
		.bg::after {
		    width: 100%;
		    height: 100%;
		    content: '';
		    position: fixed;
		    top: 0;
		    left: 0;
		    z-index: 3;
		}
		/* 外部包围|顶层样式设置 */
		.wrap{
			width: 100%;
			min-height: 80vh;
			/* background-color: black; */
		}
		.container{
			width: 90%;
			min-height: 80vh;
			margin: auto;
			/* background-color: yellowgreen; */
		}

			
		/* 头部样式设置 */
		.header{
			/* background-color: grey; */
			width: 100%;
			height: 100rpx;
			margin-top: 40rpx;	
			display: flex;
			align-items: center;
			justify-content: space-between
		}
		.logo{
			width: 270rpx;
			height: 100rpx;
		}
		.logo image{
			width: 100%;
			height: 100%;
			/* 平铺 */
		}
		.role{
			 width: 100rpx;
			 height: 100rpx;
		}
		.role image{
			width: 60%;
			height: 60%;
			object-fit: cover;
			
		}

		
		
		
		/* 身体样式设置——大图 */
		.banner{
			width: 100%;
			height: 700rpx;
			margin-top: 40rpx;
			/* background-color: aquamarine; */
		}
		.banner image{
			width: 100%;
			height: 100%;
			/* 平铺？  占满？   flex的属性？ */
			object-fit: cover;
		}
		
		
		
		
		
		
		/* 身体样式设置——选项卡*/
		.info{
			width: 100%;
			height: 550rpx;
			border-radius: 60rpx;/* 圆角 */
			/* background-color:black; */
			/* 透明 */
			background-color: rgba(255, 255, 255, 0.2);
			/* margin-top: 40rpx; */
			display: flex;
			/* 设置主轴方向 */
			flex-direction: row;
			/* 在主轴方向的对齐方式 */
			justify-content: space-around;
			flex-wrap: wrap;
			
		}
		/* 选项栏容器 */
		.info_item{
			/* background-color: aquamarine; */
			width: 30%;
			height: 40%;
			/* margin: auto; */
			/* background-color: rgba(255, 255, 255, 0.5); */
			display: flex;		
			flex-direction: column;
			align-items: center;
			/* align-content: center; */
			justify-content: space-around;
			padding: 15rpx;
			/* 圆角 */
			border-radius: 80rpx;
			transition: all 0.3s ease;
		}
		/* 悬停特效 */
		  .info_item:hover {
		        transform: scale(1.1);
		        opacity: 0.8;
		    }
		/* 放icon的容器 */
		.icon{
			width: 200rpx;
			height: 200rpx;	
		
		}
		/* icon图片本身 */
		.icon image{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		@font-face {
		    font-family: 'fontali'; /* 定义字体名称，可自定义 */
			src:url('/static/font/DingTalk-JinBuTi.woff') format('woff'); /* 字体文件路径和格式 */
			src:url('/static/font/DingTalk-JinBuTi.woff2') format('woff2'); /* 字体文件路径和格式 */
		    src:url('/static/font/DingTalk-JinBuTi.ttf') format('ttf'); /* 字体文件路径和格式 */
		}
		.text{
			/* flex的项目属性,1代表一个参数属性flex是简写:按剩余空间弹性扩展 */
			flex:1;
			color: cadetblue;
			padding-left: 20rpx;
			font-family: 'fontali';  

			
		}

		
		
		
		
		
		
		
		/* 脚部样式设置 */
		.foot{
			width: 100%;
			height: 80rpx;
			position: absolute;
			bottom: 70rpx; 
		}
		.footer {
		  text-align: center;
		  padding: 20rpx 0;
		}
		.footer-divider {
		  width: 45%;
		  height: 1rpx;
		  background-color: #ccc;
		  margin: 10rpx auto;
		}		
		.footer-icons {
		  display: flex;
		  justify-content: center;
		  margin-bottom: 1rpx;
		}		
		.footer-icon {
		  width: 40rpx;
		  height: 40rpx;
		  margin: 0 10rpx;
		}		
		.footer-copyright {
		  font-family: 'Roboto', sans-serif; /* 使用Roboto字体，你可以替换为其他你喜欢的字体 */
		    font-size: 12px;
		    letter-spacing: 1.7px; /* 增加字母间距 */
		    line-height: 1.8; /* 增加行高，实现上下间距更大 */
		  color: #cfcfcf;
		 
		            
		}
		
		
		
		
		
		
		
		
	</style>
